$colors: (
  //适合作文字的颜色
  "T5": #aaa,
  "T4": #999,
  "T3": #666,
  "T2": #333,
  "T1": #1e1e1e,
  //适合作为背景的颜色
  "B1": #fff,
  "B2": #f3f3f3,
  "B3": #e3e3e3,
  "B4": #888,
  "B5": #666,
  //主色
  "M1": #0490ff,
  "M1-1": #1968fe,
  "M1-2": #669bff,
  "M1-3": #1f223c,
  //渐变色
  "LG1": linear-gradient(90deg, var(--C-M1-1), var(--C-M1-2)),
  //功能色
  "success": #02b985,
  "fail": #d63031,
  "await": #3498db,
  "warn": #ebb000,

  "white": #fff,
  "white1": #f3f3f3,
  "white2": #eee,
  "white3": #ccc,
  "white4": #aaa,
  "white5": #888,

  "black": #000,
  "black1": #1e1e1e,
  "black2": #333,
  "black3": #666,
  "black4": #999,
  "black5": #aaa
);
// 添加不同透明度的颜色
$colorsOpacityKey: (
  "M1",
  "T1",
  "B1",
  "success",
  "fail",
  "await",
  "warn",
  "white",
  "black"
);
$colorsDarkLightKey: ("M1");

@each $key in $colorsDarkLightKey {
  @for $i from 0 through 3 {
    $colors: map-merge(
      $colors,
      (
        #{$key}-dark#{$i}: darken(map-get($colors, $key), $i * 10%),
        #{$key}-light#{$i}: lighten(map-get($colors, $key), $i * 10%)
      )
    );
  }
}

@each $key in $colorsOpacityKey {
  @for $i from 0 through 9 {
    $colors: map-merge(
      $colors,
      (#{$key}-O#{$i}: rgba(map-get($colors, $key), $i * 0.1))
    );
  }
}

:root {
  @each $key, $value in $colors {
    --C-#{$key}: #{$value};
  }
}
.van-theme-dark {
  /**适合作文字的颜色*/
  --C-T1: #fff;
  --C-T2: #f3f3f3;
  --C-T3: #aaa;
  --C-T4: #888;
  --C-T5: #666;
  /**适合作为背景的颜色*/
  --C-B5: #656565;
  --C-B4: #454545;
  --C-B3: #2d3146;
  --C-B2: #15172d;
  --C-B1: #202139;
  /**透明色*/
  --C-B1-O0: rgba(0, 0, 0, 0);
  --C-B1-O1: rgba(0, 0, 0, 0.1);
  --C-B1-O2: rgba(0, 0, 0, 0.2);
  --C-B1-O3: rgba(0, 0, 0, 0.3);
  --C-B1-O4: rgba(0, 0, 0, 0.4);
  --C-B1-O5: rgba(0, 0, 0, 0.5);
  --C-T1-O0: rgba(255, 255, 255, 0);
  --C-T1-O1: rgba(255, 255, 255, 0.1);
  --C-T1-O2: rgba(255, 255, 255, 0.2);
  --C-T1-O3: rgba(255, 255, 255, 0.3);
  --C-T1-O4: rgba(255, 255, 255, 0.4);
  --C-T1-O5: rgba(255, 255, 255, 0.5);
}
// 循环生成样式
@each $key, $value in $colors {
  .C-#{$key} {
    color: var(--C-#{$key}) !important;
  }
  .B-#{$key} {
    background-color: var(--C-#{$key}) !important;
  }
}
